<!-- 诉求上报添加(企业端) -->
<!-- 如果是待审核则修改 -->
<!-- 如果被驳回则重新提交 -->
<template>
    <div>
       <!-- <el-page-header @back="goBack"></el-page-header> -->
           <el-form ref="form" :model="form" label-width="140px">
             <el-form-item>
             <el-button type="primary" @click="usersave">使用上次保存的模板</el-button>
             </el-form-item>
               <el-form-item label="诉求类型" prop="appealtypeId">
               <el-select v-model="form.appealtypeId" placeholder="请选择"  size="small" style="float:left">
               <!-- <el-option key='0' label="不限" value="不限"></el-option> -->
               <el-option
                   v-for="item in appealtype"
                   :key="item.appealtypeId"
                   :label="item.appealtypeName"
                   :value="item.appealtypeId">
               </el-option>
               </el-select>
           </el-form-item>
           <el-form-item label="紧急程度" prop="urgency">
             <!-- <select v-model="form.urgency" placeholder="紧急程度">
               <option label="一般" value='1'></option>
               <option label="紧急" value='2'></option>
               <option label="特急" value='3'></option>
             </select> -->
             <el-select v-model="form.urgency" placeholder="紧急程度">
               <!-- <el-option key='0' label="不限" value="不限"></el-option> -->
               <el-option
                   v-for="item in teji"
                   :key="item.id"
                   :label="item.Name"
                   :value="item.id">
               </el-option>
               </el-select>
     
           </el-form-item>
           <el-form-item label="诉求主题">
               <el-input v-model="form.appealthemeName"></el-input>
           </el-form-item>
           <el-form-item label="诉求内容">
               <el-input type="textarea" v-model="form.appealcontent"></el-input>
           </el-form-item>
           <el-form-item>
               <el-button type="primary" @click="onSubmit">立即修改</el-button>
               <el-button @click="goBack" type="text" size="small">返回</el-button>
           </el-form-item>
           </el-form>
    </div>
   </template>
<script>
import axios from 'axios'

export default {
  data () {
    return {
      form: {
        appealthemeName: '',
        appealcontent: '',
        saveStatus: '',
        urgency: '',
        userId: localStorage.getItem('userId'),
        tradeId: localStorage.getItem('tradeId'),
        appealtypeId: '',
        appealreportingId: this.$route.query.appealid,
      },
      selectapplebysavestatusUrl: 'http://localhost:8081/appeal/selectapplebysavestatus',
      selectAllappealtypeUrl: 'http://localhost:8081/appeal/selectAllappealtype',
      applebysavestatusUpdateUrl: 'http://localhost:8081/appeal/applebysavestatusUpdate',
      selectappealByidUrl: 'http://localhost:8081/appeal/selectappealByid',
      appealUpdateUrl: 'http://localhost:8081/appeal/appealUpdate',
      appealtype: [],
      userId: localStorage.getItem('userId'),
      teji: [
        {
          id:1,
          Name:'一般'
        },
        {
          id:2,
          Name:'紧急'
        },
        {
          id:3,
          Name:'特急'
        }
      ]
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },

    usersave () {
      // alert(this.$route.query.userid)
      axios.get(this.selectapplebysavestatusUrl + '/'+this.userId).then(
        res => {
          console.log(res.data)
          this.form = res.data

          // if (this.form.urgency === 1) {
          //   this.form.urgencyName = '一般'
          // } else if (this.form.urgency === 2) {
          //   this.form.urgencyName = '紧急'
          // } else if (this.form.urgency === 3) {
          //   this.form.urgencyName = '特急'
          // }
        }
      ).catch(
        err => {
          console.log(err)
        }
      )
    },

    selectappealtype () {
      axios.get(this.selectAllappealtypeUrl).then(
        res => {
          console.log(res.data)
          this.appealtype = res.data
        }
      ).catch(
        err => {
          console.log(err)
        }
      )
    },

    onSubmit () {
      // alert(this.form.appealreportingId)
      const _this = this
      this.$confirm('是否保存为草稿?', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning',
        distinguishCancelAndClose: true, // 重要，设置为true才会把右上角X和取消区分开来
        closeOnClickModal: false
      }).then(function () {
        // TODO 确认通过执行逻辑
        _this.appealsavestatusUpdate()
      }).catch(function (e) {
        if (e === 'cancel') {
          // TODO 确认不通过执行逻辑
          _this.appealUpdate()
        } else if (e === 'close') {
          // TODO 右上角X的执行逻辑
        }
      })
    },

    appealsavestatusUpdate () {
      axios.post(this.applebysavestatusUpdateUrl, this.form).then(
        res => {
          console.log(res.data)
          if (res.data === 'success') {
            this.$router.push('/appealreportingUser')
          }
        }
      ).catch(
        err => {
          console.log(err)
        }
      )
    },

    selectbyId () {
      // alert(this.$route.query.appealid)
      axios.get(this.selectappealByidUrl + '/' + this.$route.query.appealid).then(
        res => {
          console.log(res.data)
          this.form = res.data
          // if (this.form.urgency === 1) {
          //   this.form.urgency = '一般'
          // } else if (this.form.urgency === 2) {
          //   this.form.urgency = '紧急'
          // } else if (this.form.urgency === 3) {
          //   this.form.urgency = '特急'
          // }
        }
      ).catch(
        err => {
          console.log(err)
        }
      )
    },
    //不保存为草稿时进行修改数据
    appealUpdate () {
 
      axios.post(this.appealUpdateUrl, this.form).then(
        res => {
          console.log(res.data)
          if (res.data === 'success') {
            this.$router.push('/appealreportingUser')
          }
        }
      ).catch(
        err => {
          console.log(err)
        }
      )
    }
  },
  mounted () {
    this.selectappealtype()
    this.selectbyId()
  }
}
</script>

<style>
    .el-input__inner{
    width: 60%;
    }
    /* .el-input{
    text-align: left;
    }*/
    .el-form-item__label{
    /* background-color: rgb(43, 83, 214);
    color: white; */
    text-align: right;
    }
    .el-form-item{
    width: 50%;
    text-align: left;
    }
</style>
